<template>
  <div class="app-container">
    <div>
      <div class="top-row" style="height: 120px;">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-card shadow="always" style="height: 100px">
              <div class="msg-box">
                <span style="float:left;">
                  <img src="static/img/img1.png" style="width: 60px;height: 60px">
                </span>
                <div class="msg-box-content">
                  <span>运行天数</span>
                  <br/>
                  <span style="font-size: x-large">{{ topLineData.runningDay }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="always" style="height: 100px">
              <div class="msg-box">
                <span style="float:left;">
                  <img src="static/img/img2.png" style="width: 60px;height: 60px">
                </span>
                <div class="msg-box-content">
                  <span>区块高度</span>
                  <br/>
                  <span style="font-size: x-large">{{ topLineData.blockHeight }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="always" style="height: 100px">
              <div class="msg-box">
                <span style="float:left;">
                  <img src="static/img/img3.png" style="width: 60px;height: 60px">
                </span>
                <div class="msg-box-content">
                  <span>总交易数</span>
                  <br/>
                  <span style="font-size: x-large">{{ topLineData.totalTrans }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="always" style="height: 100px">
              <div class="msg-box">
                <span style="float:left;">
                  <img src="static/img/img4.png" style="width: 60px;height: 60px">
                </span>
                <div class="msg-box-content">
                  <span>有效交易数</span>
                  <br/>
                  <span style="font-size: x-large">{{ topLineData.effectTrans }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col span="16">
          <el-card shadow="always" style="margin-left: 20px">
            <div id="chart" style="height: 300px;">
            </div>
          </el-card>
        </el-col>
        <el-col span="8">
          <el-card shadow="always" style="margin-right: 20px">
            <span style="font-size: medium">区块链信息统计</span>
            <el-divider></el-divider>
            <div style="height: 226px;">
              <span>运行状态：{{blockChainInfo.status}}</span><br/>
              <span>节点地址：{{blockChainInfo.address}}</span><br/>
              <span>通道名称：{{blockChainInfo.channel}}</span><br/>
              <span>合约名称：{{blockChainInfo.contract}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="tableDiv">
      <el-divider></el-divider>
      <Mtitle title="日志追踪" />
      <br/><br/>
      <el-table
        :data="tableData1"
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{background: '#c1dcb8','text-align':'center'}"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="owner"
          label="所有者">
        </el-table-column>
        <el-table-column
          prop="purpose"
          label="事件目的">
        </el-table-column>
        <el-table-column
          prop="detail"
          label="事件详情">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="level"
          label="响应等级">
        </el-table-column>
        <el-table-column
          prop="operate"
          label="操作">
          <el-button
            type="text"
            size="small">
            溯源
          </el-button>
        </el-table-column>
      </el-table>
    </div>
    <br/>
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
    <br/>

    <div style="border:1px solid #444444; height: 300px; position: relative; background-color: white; margin-left: 20px; margin-right: 20px">
      <Mtitle title="最新区块信息"></Mtitle>
      <div class="inner-div inner-div1">
        <span>本区块哈希</span><br/>
        <span style="font-size: medium">{{lastBlockInfo.currentHash}}</span>
      </div>
      <div class="inner-div inner-div2">
        <span>创建时间</span><br/>
        <span style="font-size: medium">{{lastBlockInfo.createTime}}</span>
      </div>
      <div class="inner-div inner-div3">
        <span>区块交易数</span><br/>
        <span style="font-size: medium">{{lastBlockInfo.trans}}</span>
      </div>
      <div class="inner-div inner-div4">
        <span>上一区块哈希</span><br/>
        <span style="font-size: medium">{{lastBlockInfo.preHash}}</span>
      </div>
      <div class="inner-div inner-div5">
        <span>区块高度</span><br/>
        <span style="font-size: medium">{{lastBlockInfo.height}}</span>
      </div>
      <div class="inner-div inner-div6">
        <span>执行节点</span><br/>
        <span style="font-size: medium">{{lastBlockInfo.node}}</span>
      </div>
      <div class="inner-div inner-div7">
        <img :src="connectImage" style="width: 100%; height: 100%"/>
      </div>
    </div>
    <div class="tableDiv">
      <el-divider></el-divider>
      <Mtitle title="区块信息" />
      <br/><br/>
      <el-table class="table"
                :data="tableData2"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{background: '#c1dcb8','text-align':'center'}"
                :row-class-name="tableRowClassName"
                style="width: 100%">
        <el-table-column
          prop="hash"
          label="区块哈希"
          width="180">
        </el-table-column>
        <el-table-column
          prop="total"
          label="区块交易总数"
          width="180">
        </el-table-column>
        <el-table-column
          prop="point"
          label="提案节点">
        </el-table-column>
        <el-table-column
          prop="time"
          label="时间戳">
        </el-table-column>
        <el-table-column
          prop="operate"
          label="操作">
          <el-button
            type="text"
            size="small">
            查看
          </el-button>
        </el-table-column>
      </el-table>
    </div>
    <br/>
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Mtitle from '../common/Mtitle/Mtitle'
var connectImage = require('../../../static/img/connect.png')

export default {
  name: 'Home',
  components: {Mtitle},
  data () {
    return {
      connectImage: connectImage,
      currentPage: 4,
      /*
      * 顶部栏信息
      * */
      topLineData: {
        runningDay: '2天3小时5分',
        blockHeight: '1234',
        totalTrans: '43,132',
        effectTrans: '12,345'
      },
      /*
      * 最新区块信息
      * */
      lastBlockInfo: {
        currentHash: 'ddfasdsfd',
        preHash: 'asdfsas',
        createTime: '2019-01-01',
        height: '1231',
        trans: '3121',
        node: 'peer0'
      },
      /*
      * 区块链信息统计
      * */
      blockChainInfo: {
        status: '正常',
        address: 'peer0.wonder',
        channel: 'assetchannel',
        contract: 'chain-trace'
      },
      tableData1: [{
        date: '2016-05-02',
        id: 'xxxx',
        owner: 'ddd',
        purpose: 'dddd',
        detail: 'dddd',
        status: '正常',
        level: 1,
        operate: '溯源'
      }, {
        date: '2016-05-02',
        id: 'xxxx',
        owner: 'ddd',
        purpose: 'dddd',
        detail: 'dddd',
        status: '正常',
        level: 1,
        operate: '溯源'
      }, {
        date: '2016-05-02',
        id: 'xxxx',
        owner: 'ddd',
        purpose: 'dddd',
        detail: 'dddd',
        status: '正常',
        level: 1,
        operate: '溯源'
      }, {
        date: '2016-05-02',
        id: 'xxxx',
        owner: 'ddd',
        purpose: 'dddd',
        detail: 'dddd',
        status: '正常',
        level: 1,
        operate: '溯源'
      }],
      tableData2: [{
        hash: '2016-05-02',
        total: 'xxxx',
        point: 'ddd',
        time: 'dddd'
      }, {
        hash: '2016-05-02',
        total: 'xxxx',
        point: 'ddd',
        time: 'dddd'
      }]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
    })
  },
  methods: {
    tableRowClassName ({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'odd-row'
      }
    },
    /*
    * 绘制柱状图
    * */
    drawChart () {
      this.chartLine = this.$echarts.init(document.getElementById('chart'))

      // 指定图表的配置项和数据
      var option = {
        tooltip: { // 设置tip提示
          trigger: 'axis'
        },
        color: ['#8AE09F', '#FA6F53'], // 设置区分（每条线是什么颜色，和 legend 一一对应）
        title: {
          text: '最近7天交易事件统计'
        },
        xAxis: { // 设置x轴
          type: 'category',
          boundaryGap: true, // 坐标轴两边留白
          data: ['9月2日', '9月3日', '9月4日', '9月5日', '9月6日', '9月7日', '9月8日'],
          axisLine: { // 坐标轴轴线相关设置。
            lineStyle: {
              color: '#000000'
            }
          }
        },
        yAxis: {
          boundaryGap: true, // 坐标轴两边留白
          axisLine: {
            lineStyle: {
              color: '#000000'
            }
          },
          splitLine: {
            show: false
          },
          type: 'value'
        },
        grid: {
          bottom: '1%',
          containLabel: true
        },
        series: [
          {
            name: '事件数量',
            data: [20, 232, 201, 234, 300, 320, 210],
            type: 'bar', // 类型为柱状图
            barWidth: '8%',
            lineStyle: { // 线条样式 => 必须使用normal属性
              normal: {
                color: '#8AE09F'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>

<style scoped>
.app-container {
  background: aliceblue;
}
.top-row {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.inner-div {
  text-align:center
}
.inner-div1 {
  position: absolute;
  border: 1px solid black;
  width: 16%;
  height: 18%;
  margin-left: 19.8%;
  margin-top: 15px;
}
.inner-div2 {
  position: absolute;
  border: 1px solid black;
  width: 16%;
  height: 18%;
  margin-left: 19.8%;
  margin-top: 100px;
}
.inner-div4 {
  position: absolute;
  border: 1px solid black;
  width: 16%;
  height: 18%;
  margin-left: 65%;
  margin-top: 13px;
}
.inner-div5 {
  position: absolute;
  border: 1px solid black;
  width: 16%;
  height: 18%;
  margin-left: 65%;
  margin-top: 96px;
}
.inner-div6 {
  position: absolute;
  border: 1px solid black;
  width: 16%;
  height: 18%;
  margin-left: 65%;
  margin-top: 180px;
}
.inner-div3 {
  position: absolute;
  border: 1px solid black;
  width: 16%;
  height: 18%;
  margin-left: 19.8%;
  margin-top: 180px;
}
.inner-div7 {
  position: absolute;
  width: 29%;
  height: 60%;
  margin-left: 36%;
  margin-top: 30px;
  background-color: white;
}
.msg-box-content {
  float: left;
  width: 180px;
  height: 50px;
  margin-left: 10px;
  margin-top: 5px;
}
span {
  margin-top: 4px;
  display: inline-block;
}
.tableDiv {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 40px;
}
</style>
<style>
.el-table .odd-row {
  background: #c1dcb8;
}
</style>
